import React,{useRef, useEffect,useState} from 'react'
import Navbar from '../../components/Navbar'
import {Map, NavigationControl,ZoomControl,ScaleControl,CustomOverlay} from 'react-bmapgl';
import { Toast } from 'antd-mobile';


import { reqMapData,reqHouses } from '../../api'
import { chooseCityKey } from '../../utils'
import HouseList from '../../components/HouseList'
import './index.scss'

const BMapGL =window.BMapGL

export default function MyMap(props) {

  const {history}=props

  const chooseCity=JSON.parse(localStorage.getItem(chooseCityKey))
  const [dataLevel, setDataLevel] = useState(0)
  const [lastPoint, setLastPoint] = useState(new BMapGL.Point(116.404449, 39.914889))
  const [chooseCityInfo, setChooseCityInfo] = useState({id:chooseCity.id,info:{...chooseCity},mapData:[]})
  const [houseInfo, setHouseInfo] = useState({id:'',data:{count:0,list:[]}})
  const Map_main = useRef()

  const toChangeCity=(city)=>{
    setLastPoint(new BMapGL.Point(city.coord.longitude,city.coord.latitude))
    if(!chooseCityInfo.mapData[city.value]&&dataLevel<3){
      let mapData=dataLevel<=3?[]:setChooseCityInfo.mapData
      setChooseCityInfo(()=>({id:city.value,info:{...city},mapData}))
    }else{
      setHouseInfo({id:city.value,data:[]})
    }
  }

  const {mapData}=chooseCityInfo

  useEffect(() => {
    async function getMapData(params){
      Toast.loading('loading...',0) 
      let res=await reqMapData(params)
      setChooseCityInfo(()=>{
        return {id:chooseCityInfo.id,info:chooseCityInfo.info,mapData:res.body}
      })
      setDataLevel(dataLevel<=3?dataLevel+1:dataLevel)
      if(dataLevel+1<=3)setLastPoint(new BMapGL.Point(res.body[0].coord.longitude,res.body[0].coord.latitude))
      Toast.hide()
    }
    async function getHouse(params){
      let res=await reqHouses(params)
      setHouseInfo({id:houseInfo.id,data:res.body})
    }
    if(chooseCityInfo.mapData.length===0&&dataLevel<3)getMapData({id:chooseCityInfo.id})
    if(dataLevel===3&&houseInfo.data.length===0)getHouse({cityId:houseInfo.id})
  }, [chooseCityInfo,dataLevel,houseInfo]);

  return (
    <div className='map-page'>
      <div className='map-navbar'>
        <Navbar title='地图找房'></Navbar>
      </div>
      <div className='map-content'>
        {mapData.length!==0?<Map 
        onClick={()=>setHouseInfo({id:'',data:{count:0,list:[]}})} 
        ref={Map_main}
        center={lastPoint} 
        enableScrollWheelZoom={true} zoom={12+2*(dataLevel-1)} 
        style={{position: 'relative', height: '100%'}} 
        >
          <NavigationControl />
          <ZoomControl />
          <ScaleControl />
          {
            mapData.length!==0?mapData.map((i,index)=>{
              return <div key={i.value} className='map-label-item'>
                  <CustomOverlay
                    position={new BMapGL.Point(i.coord.longitude,i.coord.latitude)}
                    /* autoViewport={index===0} */
                  >
                    {
                      dataLevel<3?
                      <div className='map-label-item-content' onClick={()=>toChangeCity(i)}>
                        <span>{i.label}</span>
                        <span>{i.count}</span>
                      </div>:
                      <div className='map-label-item-content-detail' onClick={()=>toChangeCity(i)}>
                        <span>{i.label}</span>
                        <span>{i.count}套</span>
                      </div>
                    }
                  </CustomOverlay>
                </div>
            }):null
            
          }
        </Map>:<Map center={lastPoint} zoom={12+2*(dataLevel-1)} style={{position: 'relative', height: '100%'}} enableScrollWheelZoom={true}/>}
      </div>
      <div className={(dataLevel===3&&(houseInfo.data.list&&houseInfo.data.list.length!==0))?'map-show-module show':'map-show-module'}>
        <div className='map-show-title'>
          <span>房屋列表</span>
          <span onClick={()=>history.push('/home/find')}>更多资源</span>
        </div>
        <div className='map-show-list'>
          {
            dataLevel<3||houseInfo.data.list===0?
            null:
            <HouseList list={houseInfo.data.list} history={history}></HouseList>
          }
        </div>
      </div>
    </div>
  )
}
